<script setup lang="ts">
import MainTabBar from "@/components/main_tab_bar/MainTabBar.vue";
import SecondaryTabBar from "@/components/main_tab_bar/SecondaryTabBar.vue";
import Player from "@/components/playmusic/Player.vue";
import {onMounted} from "vue";
import {useStore} from "@/store";
import {debounce} from "@/tool/tool";
import {getCookie} from "@/until/cookie";
import {toNumber} from "lodash-es";

const store = useStore();
// 防抖函数

const getVisibleHeight = () => {
  store.commit("window/GET_WINDOW_HEIGHT", document.documentElement.clientHeight);
};
const getWindowPageYOffset = () => {
  store.commit("window/GET_WINDOW_PAGE_Y_OFFSET", window.scrollY);
};
const useGetVisibleHeight = debounce(getVisibleHeight, 500);
const useGetWindowPageYOffset = debounce(getWindowPageYOffset, 500);
//监控窗口改变事件
window.addEventListener("resize", () => {
  useGetVisibleHeight();
});
window.addEventListener("scroll", () => {
  useGetWindowPageYOffset();
});
onMounted(getVisibleHeight);
onMounted(getWindowPageYOffset);
onMounted(() => {
  if (getCookie() !== "undefined" && window.localStorage.getItem("userId") !== null) {
    store.dispatch("login/userHadLogin", toNumber(window.localStorage.getItem("userId")));
  }
});
</script>
<template>
  <suspense>
    <template #default>
      <div class="main_container">
        <div class="content">
          <main-tab-bar></main-tab-bar>
          <router-view name="SecondaryTabBar" #default="{Component}">
            <component :is="Component??SecondaryTabBar"></component>
          </router-view>
          <div class="main_view">
            <div class="s_view">
              <router-view #default="{Component}">
                <component :is="Component"></component>
              </router-view>
            </div>
          </div>
        </div>
        <div class="push"></div>
        <div class="footer">
          <player class="player"></player>
        </div>
      </div>
    </template>
  </suspense>
</template>
<style scoped lang="scss">
.main_container {
  min-width: 1200px;
  min-height: 100%;

  .content {
    min-height: calc(100% - 60px);
  }

  .main_view {
    display: flex;
    justify-content: center;
    background-color: #ecf0f1;

    .s_view {
      width: 980px;
      background-color: #fff;
    }
  }

  .push {
    height: 60px;
  }

  .footer {
    position: fixed;
    height: 60px;
    margin-top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999999;
  }
}
</style>
